<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。
        我们可以设置 input 样式为 outline: none; 来忽略该效果。 */

        /* 使用 :focus 选择器可以设置输入框在获取焦点时的样式： */
        input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 1px solid #555;
            outline: none;
        }

        input[type=text]:focus {
            background-color: lightblue;
        }
    </style>
</head>

<body>

    <p>在这个实例中，我们使用了 :focus 选择器（点击输入框时）来给文本输入框添加背景颜色:</p>

    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname" value="John">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname" value="Doe">
    </form>

</body>

</html>